<template>
    <div class="box_alarm">
        <MoodalTitle :title="'人员在线情况'">
            <TimeTab :timeList="timeList" @timeReturnFn="timeReturnFn" />
        </MoodalTitle>
        <div id="life" class="box_chart"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import TimeTab from '@/components/TimeTab/Index.vue'
import { ZongHeZhTiFaDB } from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            timeList: [
                {
                    title: '周',
                    value: 1,
                },
                {
                    title: '月',
                    value: 2,
                },
                {
                    title: '年',
                    value: 3,
                },
            ],
            dateType:1
        }
    },
    mounted() {
        this.wasteContrOquantity()
    },
    methods: {
        functEchart(count, date, previousCount) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#life'));

            let option = {
                title: {
                    // text: '数量',
                    // color: '#ffffff',
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisTick: {
                        show: false //是否显示刻度线
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    data: date
                },
                yAxis: {
                    name: '人数',
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    axisTick: {
                        show: false //是否显示刻度线
                    },
                    splitLine: { // ‘三’形分隔线
                        show: true,
                        lineStyle: {
                            color: '#22376d'
                        },
                    }

                },
                legend: {
                    top: '5%', // 控制 板块控制器的位置
                    right: 'center',
                    // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                    // itemWidth: 10,  // 设置宽度
                    // itemHeight: 4, // 设置高度
                    itemGap: 40, // 设置两个legend之间的间距
                    data: [
                        {
                            name: '在线',  // 这个name需要和 series 里面的 name 对应起来
                            textStyle: {
                                color: '#2DC3FB' // 单独设置某一个图列的颜色
                            }
                        },
                        {
                            name: '离线',  // 这个name需要和 series 里面的 name 对应起来
                            textStyle: {
                                color: '#FDD43C' // 单独设置某一个图列的颜色
                            }
                        }
                    ]
                },

                series: [
                    {
                        name: '在线',
                        type: 'bar',
                        data: previousCount,
                        itemStyle: {
                            color: '#3CFFFF',
                        },
                        barWidth: 10,
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        data: count,
                        itemStyle: {
                            color: '#FFD33C',
                        },
                        barWidth: 10,
                    },]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 人员在线情况
        wasteContrOquantity() {
            let page = {
                dateType: this.dateType,
            }
            ZongHeZhTiFaDB.zongheZhiFaYunXingAPI(page).then(res => {
                let count = []
                let date = []
                let previousCount = []
                console.log(res, '人员在线情况');
                if (res.code == 200) {
                    res.data.forEach(item => {
                        count.push(item.offlineNumber)
                        date.push(item.date)
                        previousCount.push(item.onlineNumber)
                    })
                    console.log(count, date, previousCount);
                    this.functEchart(count, date, previousCount)
                }
            })
        },
        timeReturnFn(val) {
            this.dateType = val.value
            this.wasteContrOquantity()
        },
       
    }
}

</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 47.5rem !important;
    margin-bottom: 1.9rem;
}

.flex {
    display: flex;
    justify-content: flex-start;
}

.flex2 {
    display: flex;
}

.box_dl {
    margin-left: 1.5rem;
    margin-top: 1rem;
    width: 6rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    background: #1F4987;
    color: #fff;
    font-size: 1.4rem;
    opacity: 1;
    border-radius: 1rem 1rem 1rem 1rem;
    border: 0.1rem solid #00D6FB;
}

.border {
    opacity: 0.6 !important;
}

.box_dl2 {
    margin-left: 1.5rem;
    margin-top: 1rem;
    width: 3rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    background: #1F4987;
    color: #fff;
    font-size: 1.4rem;
    opacity: 1;
    border-radius: 1rem 1rem 1rem 1rem;
    border: 0.1rem solid #00D6FB;
}

.box_chart {
    width: 45rem;
    height: 40rem;
}
</style>